<template>
  <div class="bigdata">
    <div class="content_center" style="flex: 1">
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">瓦斯动态预警统计</span>
        </div>
        <div class="fuse-main" style="padding: 0 0.2rem">
          <happy-scroll color="rgba(0,0,0,0.5)" size="5">
            <el-table :data="wstableData" class="backtable">
              <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ssTransducerPoint"
                label="监测点区域"
                show-overflow-tooltip
                align="center"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="ssTransducerValue"
                label="检测值"
                show-overflow-tooltip
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="ssAnalogAlarmhigh"
                label="预警上限值"
                show-overflow-tooltip
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="beishu"
                label="预警倍数"
                show-overflow-tooltip
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="zengfu"
                label="增幅值"
                show-overflow-tooltip
                width="120"
                align="center"
              >
              </el-table-column>
            </el-table>
          </happy-scroll>
        </div>
      </div>
      <div class="border fuse-side_middle" style="margin: 0 0.2rem !important">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">瓦斯误报警分析</span>
        </div>
        <div class="fuse-main" id="wsdata1"></div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">昨日瓦斯报警与误报警分析</span>
        </div>
        <div class="fuse-main">
          <ul class="police">
            <li>
              <p>昨日瓦斯报警分析</p>
              <!-- <h1>{{ Analysis.todayValue }}</h1> -->
              <h1>0</h1>
              <h2>
                <span>环比：</span>
                <!-- <img
                  :src="
                    Analysis.todayHb < 0
                      ? require('../../../assets/images/img64.png')
                      : require('../../../assets/images/img65.png')
                  "
                /><span :class="Analysis.todayHb < 0 ? 'red' : ''"
                  >{{ Analysis.todayHb }}%</span
                > -->
                <img
                  src="../../../assets/images/img65.png"
                /><span 
                  >-%</span
                >
              </h2>
            </li>
            <li>
              <p>昨日瓦斯误报警分析</p>
              <!-- <h1>{{ Analysis.monthValue }}</h1> -->
              <h1>0</h1>
              <h2>
                <span>环比：</span>
                <!-- <img
                  :src="
                    Number(Analysis.monthHb) < 0
                      ? require('../../../assets/images/img64.png')
                      : require('../../../assets/images/img65.png')
                  "
                /><span :class="Analysis.monthHb < 0 ? 'red' : ''"
                  >{{ Analysis.monthHb }}%</span
                > -->
                <img
                  src="../../../assets/images/img65.png"
                /><span 
                  >-%</span
                >
              </h2>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content_center" style="flex: 1">
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">近七天产量与井下人数分析</span>
        </div>
        <div class="fuse-main" id="wsdata2"></div>
      </div>
      <div class="border fuse-side_middle" style="margin: 0 0.2rem !important;position: relative;">
        <h2 @click="getdemo" style="position:absolute;width: 125px;height: 26px;right: 0px;top: -8px;cursor: pointer;z-index:20"></h2>
        <div class="fuse-title" style="position: relative">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">瓦斯浓度实时预测</span>
          <el-select
            v-model="ssTransducerPoint"
            placeholder="请选择工作面"
            style="width: 150px; position: absolute; right: 1.3rem; top: 0px"
            filterable
            @change="changesensor"
          >
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="item in sensorList"
              :key="item.ssTransducerCode"
              :label="item.ssTransducerPoint"
              :value="item.ssTransducerCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="fuse-main">
          <div class="text1">
            <p>{{ name }}浓度值实时预测</p>
            <el-tooltip
              class="item"
              effect="light"
              :content="text"
              placement="top"
            >
              <p>
                {{ text }}
              </p>
            </el-tooltip>
          </div>
          <div
            id="data3"
            style="width: 100%; height: 1.7rem; margin-top: 0.2rem"
          ></div>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">近一周瓦斯报警与误报警分析</span>
        </div>
        <div class="fuse-main">
          <ul class="policetj">
            <li>
              <!-- <p>{{ Analysistj.month }}</p> -->
              <p>0</p>
              <h1>瓦斯报警统计</h1>
            </li>
            <li>
              <!-- <p>{{ Analysistj.year }}</p> -->
              <p>0</p>
              <h1>瓦斯误报警统计</h1>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content_bom" style="flex: 1">
      <img src="../../../assets/images/img6.png" alt="" />
      <h1>煤矿安全趋势</h1>
      <div class="botm">
        <div id="data6" style="height: 2.2rem"></div>
        <!-- <happy-scroll color="rgba(0,0,0,0.5)" size="5"> -->
        <el-table
          :data="tableData"
          class="backtable"
          height="210"
          style="margin-left: 0.6rem"
        >
          <el-table-column
            prop="date"
            label="日期"
            show-overflow-tooltip
            width="140"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="point"
            label="安全评分"
            show-overflow-tooltip
            width="140"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="riskLevel"
            label="危险等级"
            show-overflow-tooltip
            width="140"
            align="center"
          >
          </el-table-column>
        </el-table>
        <!-- </happy-scroll> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { HappyScroll } from 'vue-happy-scroll'
import 'vue-happy-scroll/docs/happy-scroll.css'
export default {
  components: {
    HappyScroll
  },
  data() {
    return {
      tableData: [],
      wstableData: [],
      sensorList: [],
      ssTransducerPoint: '',
      Analysis: {},
      Analysistj: {},
      img1: require('@/assets/images/img65.png'),
      img2: require('@/assets/images/img64.png'),
      text:
        '围绕能够反应煤矿采煤工作面瓦斯浓度突变危险性的静态影响因子，并实时获取动态影响因子的监测数据，简历采煤工作面瓦斯浓度预测模型。将预测值与《AQ1029-2019》中对甲烷传感器报警浓度，断电浓度规则进行对比，确定预测状态。'
    }
  },
  mounted() {
    this.getdata1()
    this.getwstableData()
    this.getwsdata1()
    this.getwsdata2()
    this.getsensorList()
  },
  methods: {
    getdemo(){
      this.$notify({
          title: '警告',
          message: '36108主运切眼回风流甲烷正在进行预警，预警值为：0.45CH4%.',
          type: 'warning',
          position: 'bottom-right'
        });
    },
    // 煤矿安全趋势-折线图
    getdata1() {
      this.$http.get('/SysBigData/SysBigData/bigDataTrend').then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list
          var chart6 = echarts.init(document.getElementById('data6'))
          var option6 = {
            backgroundColor: '#080b3000',
            title: [
              {
                text: '',
                textStyle: {
                  align: 'center',
                  color: '#fff',
                  fontSize: 20
                },
                top: '5%',
                x: '30%'
              }
            ],
            tooltip: {
             trigger: 'axis',
              // formatter: function(prams) {
              //   return (
              //     prams[0].name + '\n' + '\n' + '报警数量：' + prams[0].value + '个'
              //   )
              // }
            },
            grid: {
              top: '15%',
              bottom: '12%',
              left: '50',
              right: '20'
            },
            legend: {
              show: true,
              top: '10%',
              left: '50%',
              icon: 'circle',
              textStyle: {
                color: '#d4e3e6'
              }
            },
            xAxis: [
              {
                type: 'category',
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#00c7ff',
                    width: 1,
                    type: 'solid'
                  }
                },
                axisTick: {
                  show: true
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#00c7ff'
                  }
                },
                boundaryGap: false,
                data: res.data.date
              }
            ],
            yAxis: [
              {
                type: 'value',
                min: 0,
                max: 100,
                name: '次',
                nameTextStyle: {
                  color: '#d2d2d2',
                  fontSize: 14,
                  padding: [0, 0, 20, -50]
                },
                splitNumber: 5,
                axisLabel: {
                  margin: 20,
                  textStyle: {
                    color: '#00c7ff'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#00c7ff',
                    width: 1,
                    type: 'solid'
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: '#0F55B9'
                  }
                }
              }
            ],
            series: [
              {
                name: '',
                type: 'line',
                // symbol: 'none',  //取消折点圆圈
                smooth: 'false',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 12,
                itemStyle: {
                  color: '#f5e341',
                  borderColor: '#fff',
                  borderWidth: 2
                },
                lineStyle: {
                  width: 4,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#152a3f'
                    },
                    {
                      offset: 1,
                      color: '#f5e341'
                    }
                  ]),
                  shadowColor: '#f5e341',
                  shadowBlur: 40
                },
                tooltip: {
                  show: false
                },
                data: res.data.point
              }
            ]
          }
          chart6.setOption(option6)
        }
      })
    },
    // 瓦斯动态预警
    getwstableData() {
      this.$http.get('/warningAnalysis/wasiWarningList').then(res => {
        if (res.code == 200) {
          this.wstableData = res.data
        }
      })
    },
    // 瓦斯误报警分析
    getwsdata1() {
      this.$http.get('/warningAnalysis/wasiNoWarning').then(res => {
        if (res.code === 200) {
          var chart1 = echarts.init(document.getElementById('wsdata1'))
          var fontColor = '#30eee9'
          var option = {
            grid: {
              left: '15px',
              right: '10%',
              top: '20%',
              bottom: '10px',
              containLabel: true
            },
            tooltip: {
              show: true,
              trigger: 'item'
            },
            legend: {
              show: true,
              x: 'center',
              y: '10',
              icon: 'stack',
              itemWidth: 10,
              itemHeight: 10,
              textStyle: {
                color: '#1bb4f6'
              }
              // data: []
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                  color: fontColor
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#397cbc'
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#195384'
                  }
                },
                data: res.data.date
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '次',
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: '#2ad1d2'
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#27b4c2'
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#11366e'
                  }
                }
              }
            ],
            series: [
              {
                name: '瓦斯误报警',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                  normal: {
                    color: '#0092f6',
                    lineStyle: {
                      color: '#0092f6',
                      width: 1
                    },
                    areaStyle: {
                      // color: '#94C9EC'
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                          offset: 0,
                          color: 'rgba(7,44,90,0.3)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(0,146,246,0.9)'
                        }
                      ])
                    }
                  }
                },
                markPoint: {
                  itemStyle: {
                    normal: {
                      color: 'red'
                    }
                  }
                },
                data: res.data.num
              }
            ]
          }
          chart1.setOption(option)
        }
      })
      // 瓦斯今日当月误报警统计分析
      this.$http.get('/warningAnalysis/statisticalAnalysis').then(res => {
        if (res.code == 200) {
          this.Analysis = res.data
        }
      })
      // 瓦斯当月当年误报警统计分析
      this.$http.get('/warningAnalysis/wasiNoWarningManage').then(res => {
        if (res.code == 200) {
          this.Analysistj = res.data
        }
      })
    },
    // 近七天产量与井下人数统计
    getwsdata2() {
      this.$http.get('/warningAnalysis/tongji').then(res => {
        if (res.code === 200) {
          var chart2 = echarts.init(document.getElementById('wsdata2'))
          var option2 = {
            grid: {
              top: '20%',
              bottom: '15%'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true
                }
              }
            },
            legend: {
              top: '5%',
              textStyle: {
                color: '#ffffff'
              }
            },
            xAxis: {
              data: res.data.date,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#01FCE3'
                }
              },
              axisTick: {
                show: true
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#ebf8ac'
                }
              }
            },
            yAxis: [
              {
                type: 'value',
                name: '单位：吨',
                nameTextStyle: {
                  color: '#ebf8ac'
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: true
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#FFFFFF'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#ebf8ac'
                  }
                }
              },
              {
                type: 'value',
                name: '单位：个',
                nameTextStyle: {
                  color: '#ebf8ac'
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: true
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#FFFFFF'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#ebf8ac'
                  }
                }
              },
              {
                type: 'value',
                gridIndex: 0,
                min: 50,
                max: 100,
                splitNumber: 8,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                  }
                }
              }
            ],
            series: [
              {
                name: '产量',
                type: 'bar',
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#00FFE3'
                      },
                      {
                        offset: 1,
                        color: '#4693EC'
                      }
                    ])
                  }
                },
                data: res.data.omOutputDay
              },
              {
                name: '下井人数',
                type: 'line',
                barWidth: 15,
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#00FFE3'
                      },
                      {
                        offset: 1,
                        color: '#4693EC'
                      }
                    ])
                  }
                },
                data: res.data.personNum
              }
            ]
          }
          chart2.setOption(option2)
        }
      })
    },
    // 瓦斯浓度实时预测
    getsensorList() {
      this.$http.get('/dynamic/warning/wasiList').then(res => {
        if (res.code === 200) {
          this.sensorList = res.data
          this.ssTransducerPoint = this.sensorList[0].ssTransducerCode
          this.changesensor(this.sensorList[0].ssTransducerCode)
        }
      })
    },
    changesensor(e) {
      this.sensorList.forEach(item => {
        if (e == item.ssTransducerCode) {
          this.name = item.ssTransducerPoint
        }
      })
      var earlyData = [];

      if (this.name.indexOf("工作面") != -1) {
        earlyData = [
          {
            name: "阈值",
            yAxis: 0.7,
            label: {
              show: "true",
              position: "end",
              formatter: "预警值"
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "yellow"
              }
            }
          }
        ];
      } else if (this.name.indexOf("回风流") != -1) {
        earlyData = [
          {
            name: "阈值",
            yAxis: 0.45,
            label: {
              show: "true",
              position: "end",
              formatter: "预警值"
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "yellow"
              }
            }
          }
        ];
      } else {
        earlyData = [];
      }
      this.$http
        .get('/dynamic/warning/Dynamic?transducerCode=' + e)
        .then(res => {
          if (res.code === 200) {
            // this.sensorList = res.data
            var chart3 = echarts.init(document.getElementById('data3'))
            var option3 = {
              backgroundColor: '#0A165100',
              // title: {
              //   text: name + '浓度值实时预测',
              //   textStyle: {
              //     align: 'center',
              //     color: '#fff',
              //     fontSize: 14
              //   },
              //   top: '-8%',
              //   left: 'center'
              // },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#57617B'
                  }
                }
              },
              legend: {
                // icon: 'diamond',
                itemGap: 13,
                data: ['接口增加量'],
                top: '3%',
                left: 'center',
                textStyle: {
                  fontSize: 12,
                  color: '#F1F1F3'
                }
              },
              grid: {
                width: '70%',
                height: '50%',
                bottom: '10%',
                top: '13%'
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: false,
                  axisLine: {
                    lineStyle: {
                      color: '#57617B'
                    }
                  },
                  data: res.data.timeList
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#57617B'
                    }
                  },
                  splitNumber: 5,
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      color: 'rgba(255,255,255,.6)',
                      fontSize: '12'
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: 'rgba(255,255,255,0.1)'
                    }
                  }
                }
              ],
              series: [
                {
                  name: '浓度值',
                  type: 'line',
                  smooth: true,
                  markLine: {
                    // 最大值和最小值
                    data: earlyData
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  },
                  symbol: 'circle',
                  symbolSize: 4,
                  itemStyle: {
                    normal: {
                      color: 'yellow'
                      // borderColor: 'blue', //拐点边框颜色
                    }
                  },
                  data: res.data.valList
                }
              ]
            }

            chart3.setOption(option3)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.bigdata {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../../../assets/images/back.png') no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .content {
    background: url('../../../assets/images/imglong.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 0.7rem 0.2rem 0.9rem;
    padding: 0.1rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.4rem;
    }
    h1 {
      display: inline-block;
      vertical-align: top;
      margin-top: 0.13rem;
      font-size: 0.18rem;
      color: #fff;
    }
    ul {
      display: flex;
      justify-content: center;
      width: 100%;
      li {
        width: 25%;
        // background: #fff2;
        padding: 0.2rem 0.4rem;
        text-align: center;
        .headmodle {
          display: flex;
          // justify-content: space-evenly;
          height: 0.7rem;
          background: url('../../../assets/images/titlekuang.png') no-repeat;
          background-size: 100% 100%;
          padding-top: 0.16rem;
          padding-left: 0.5rem;
          .topimg {
            width: 0.3rem;
            height: 0.3rem;
            margin-top: 0.03rem;
          }
          .textleft {
            margin-left: 0.25rem;
            p:nth-child(1) {
              font-size: 0.24rem;
              color: #00f6ff;
            }
            p:nth-child(2) {
              font-size: 0.12rem;
              color: #fff;
              margin-top: 0.03rem;
            }
          }
          .textcenter {
            img {
              width: 0.13rem;
              height: 0.18rem;
            }
            p {
              font-size: 0.12rem;
              color: #fff;
              margin-top: 0.03rem;
            }
            p:nth-child(1) {
              color: #f63939;
            }
          }
          .textright {
            img {
              width: 0.13rem;
              height: 0.18rem;
            }
            p {
              font-size: 0.12rem;
              color: #fff;
              margin-top: 0.03rem;
            }
            p:nth-child(1) {
              color: #39f6b2;
            }
          }
          div {
            margin-right: 0.25rem;
          }
        }
      }
    }
  }
  .content_bom {
    background: url('../../../assets/images/imglong.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 0.1rem 0.2rem 0.1rem;
    padding: 0.1rem;
    img {
      width: 0.4rem;
    }
    h1 {
      display: inline-block;
      vertical-align: top;
      margin-top: 0.13rem;
      font-size: 0.18rem;
      color: #fff;
    }
    .botm {
      display: flex;
      #data6 {
        width: 73%;
      }
    }
  }
}
::v-deep .el-input--medium .el-input__inner {
  height: 26px;
  line-height: 26px;
  border: 1px solid #074e83;
  background: #06244ec9 !important;
  color: #ccc;
}
::v-deep .el-input__suffix {
  top: 6px;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #1a4c99 !important;
}
.el-select-dropdown__item {
  color: #fff !important;
}
::v-deep.el-select .el-input .el-select__caret {
  top: -6px;
  right: 0;
}
.text1 {
  width: 100%;
  height: 0.42rem;
  // background: pink;
  color: #fff;
  box-sizing: border-box;
  padding: 0 20px;
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //多行在这里修改数字即可，这里显示3行
    -webkit-box-orient: vertical;
    line-height: 0.2rem;
    text-indent: 0.24rem;
  }
  p:nth-child(1) {
    font-size: 0.16rem;
    font-weight: bold;
    margin: 0.1rem 0;
    text-align: center;
  }
}
.police {
  display: flex;
  margin-top: 0.1rem;
  li {
    flex: 1;
    margin: 0 0.1rem;
    background: url(../../../assets/images/img68.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    p {
      height: 0.5rem;
      line-height: 0.5rem;
      color: #fff;
      font-size: 0.14rem;
      letter-spacing: 1px;
    }
    h1 {
      font-size: 0.28rem;
      margin: 0.35rem 0;
      color: #1dd0eb;
      font-weight: 600;
    }
    h2 {
      height: 0.3rem;
      line-height: 0.3rem;
      background: url(../../../assets/images/img66.png) no-repeat;
      background-size: 100% 100%;
      width: 80%;
      margin: 0.15rem auto;
      font-size: 0.14rem;
      span:nth-child(1) {
        color: #fff;
      }
      img {
        width: 0.08rem;
        height: 0.13rem;
      }
      span:nth-child(3) {
        color: rgb(78, 246, 6);
      }
    }
  }
}
.red {
  color: red !important;
}
.policetj {
  display: flex;
  li {
    flex: 1;
    text-align: center;
    p {
      background: url(../../../assets/images/img67.png) no-repeat;
      background-size: 100% 100%;
      width: 1.52rem;
      height: 1.52rem;
      line-height: 1.52rem;
      margin: 0.1rem auto;
      font-size: 0.3rem;
      color: #97dafd;
    }
    h1 {
      text-align: center;
      color: #fff;
      font-size: 0.14rem;
    }
  }
}
</style>